<template>
	<view class="custom-page">
		<hs-status-bar></hs-status-bar>
		<top-bar :haveBack="!shareId" :haveBackIndex="shareId"></top-bar>
		<scroll-view scroll-y="true" class="custom-scroll">
			<image class="share" src="@/static/images/icon/weixin.png" mode="aspectFit"></image>
			<button class="share btn" @click="share">
			</button>
			<view class="share-text">
				<view class="text breathe-animation">分享助力</view>
				<view class="text breathe-animation-delay">立送现金抵扣</view>
			</view>
			<hs-selectPhoneModelPrivate :disabled="true" :phoneModelId="_phoneModelId" @selectModel="selectModel"
				style="display: inline-block;position:absolute;top: 17rpx;left: 17rpx;z-index: 1;"
				ref="selectPhoneModel"></hs-selectPhoneModelPrivate>

				<!-- <hs-phoneModel :materialList="skuList" ref="phoneModel"
				@handleSelectModel="selectModel" @handleSelectMaterial="selectMaterial"></hs-phoneModel> -->

			<swiper :indicator-dots="true" :duration="1000" class="swiper" @change="onSwiperChange">
				<swiper-item>
					<view class="image-view" @click="previewImage(0)">
						<image class="picture" :src="detailInfo.imageUrl"></image>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="image-view" @click="previewImage(0)">
						顶层机壳
						<image class="picture btm" :src="baseImageUrl"></image>
						贴纸
						<image class="picture" :src="item.imageUrl" v-for="(item,index) of detailInfo.stickerImageList"
							:key="index" :style="{
								height:item.height*0.75+'rpx',
								width:item.width*0.75+'rpx',
								transform:
								`translate(${0.75 *item.x}rpx, ${0.75 *item.y}rpx)`
								+` rotate(${item.rotationAngle}deg)`
								+` scale(${item.overturn?-1*item.scaleX:item.scaleX},${item.scaleY})`,
								zIndex:item.index
							}"></image>
						顶层机壳
						<image class="picture top" :src="frameImageUrl"></image>
					</view>
				</swiper-item> -->
				<swiper-item v-for="(item,index) of skuList[activeSkuIndex].carouselImages" :key="item.id"
					@click="previewImage(index+1)">
					<view class="image-view">
						<image class="picture" :src="item.imageUrl" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="sku-box  hs-full-x">
				<!-- <view class="to-edit" @click="toEdit">
					去设计
				</view> -->
				<view class="phone-model">
					<text class="title">机型：</text>
					<view class="select">
						<!-- <hs-selectPhoneModelPrivate :phoneModelId="_phoneModelId"
							style="display: inline-block;position:relative;" @selectModel="selectModel"><text
								class="text1">▼</text></hs-selectPhoneModelPrivate> -->

								<hs-selectmachine :phoneModelId="_phoneModelId" :isPrivate="true"
							@selectModel="selectModel"><text class="text1">▼</text></hs-selectmachine>

					</view>

				</view>
				<view class="skus">
					<text class="title">材质：</text>
					<view class="select">
						<view class="skus-item" v-for="(item,index) of skuList" :key="item.id"
							@click="chooseMaterial(item,index)" :class="{active:activeMaterialId == item.materialMap[10]}">
							{{item.shortName + ' ￥' + item.price/100}}

						</view>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="details-item" v-for="(item,index) of skuList[activeSkuIndex].detailImages"  :key="item.id" @click="previewDetailImages(index)">
					<image class="picture" :src="item.imageUrl + '?x-oss-process=image/resize,w_750/format,webp/interlace,1'" 
					:lazy-load="true"
					 :webp="true"
					:fade-show="false"
					:loading="'loading'"
					mode="aspectFit"></image>
				</view>
			</view>

		</scroll-view>
		<view class="custom-bottom">
			<!-- <view class="custom retry" @click="$u.debounce(retry)">
				重新生成人像
			</view> -->
			<view class="price">
				￥{{skuList[activeSkuIndex].price/100}}
			</view>

			<!--  -->
			<!-- <view class="custom" v-if="isStore!=''" @click="toPrint()"> （废弃）
				现场打印 
			</view> -->
			<view class="custom" v-if="isStore!=''" @click="toBuy()">
				现场打印
			</view>
			<view v-else class="custom" :class="{retry:isStore!=''}">

				<button open-type="getPhoneNumber" @getphonenumber.stop="getPhoneNumber" v-if="!phoneNumber"
					class="get-phone">授权并获取手机号</button>
				<view class="" @click="$u.debounce(toBuy)">
					立即购买
				</view>

			</view>
		</view>

		<preview-phonecase :stickerImageList="detailInfo.stickerImageList" :frameImageUrl="frameImageUrl"
			:baseImageUrl="baseImageUrl" :detail="skuList[activeSkuIndex].carouselImages"
			ref="previewPhonecase"></preview-phonecase>
		<!-- <share ref="shareBox" :posterImage="detailInfo.imageUrl" type="3" :sourceId="detailInfo.id"
			:price="skuList[activeSkuIndex].price/100"></share> -->
			<share ref="shareBox" 
			:posterImage="currentCarouselImage" 
			type="3" 
			:sourceId="detailInfo.id"
			:price="skuList[activeSkuIndex].price/100">
			</share>
		<to-print ref="printBox"></to-print>
	</view>
</template>

<script>
	import {
		getCustomDetail,
		generateShare,
		getSkuList,
		getShareInfo,
		sendMessage
	} from '@/api/custom.js'
	import {
		userLogin
	} from "@/utils/utils.js";
	import {
		getCreditList
	} from '@/api/my.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		decryptPhoneNumber,
		setDefaultPhoneModel
	} from '@/api/user.js';
	export default {
		data() {
			return {
				currentSwiperIndex: 0, // 新增当前轮播图索引
				currentCarouselImage: '', // 新增当前轮播图URL
				shareId: '',
				detailInfo: {},
				_phoneModelId: null,
				isSelectPhoneModel: false,
				// 机壳列表
				skuList: [],
				activeMaterialId: null,
				activeSkuIndex: 0,
				frameImageUrl: '',
				baseImageUrl: '',
				activeMaterialMap: {},
				reflash:true,
				id:''
			}
		},
		computed: {
			...mapGetters(['phoneNumber', 'phoneModelId', 'isStore','getCurrentMaterial']),
		},
		async onShow() {
			
			// 新增Vuex状态检查 为了从diy页面返回时，可以重新获取机壳列表
			const currentMaterial = this.getCurrentMaterial
			console.log('currentMaterial', currentMaterial);
			if(currentMaterial && currentMaterial.materialMap?.[10]){
				this.activeMaterialId = currentMaterial.materialMap[10]
			}
			if (!this.reflash) {
				this.reflash = true
			} else {
				
				if (this.shareId == '') {
					await this.getCustomDetail()
				// 	// if(this.detailInfo){
				// 	// 	let id = this.isSelectPhoneModel  ? this._phoneModelId : this.detailInfo.materialMap[11]
				// 	// 	this.getSkuList(id , true)
				// 	// }
					
				}
			}
		},
		methods: {
			...mapMutations(['setPhoneNumber', 'setTotalCredits','setCurrentMaterial']),
			// 轮播图切换回调
			onSwiperChange(e) {
				this.currentSwiperIndex = e.detail.current
				
				// 计算实际图片索引（首项是商品主图）
				const actualIndex = Math.max(e.detail.current - 1, 0)
				
				this.currentCarouselImage = 
				e.detail.current === 0 ? 
					this.detailInfo.imageUrl : 
					this.skuList[this.activeSkuIndex]?.carouselImages?.[actualIndex]?.imageUrl || ''
			},
			// 获取详情
			async getCustomDetail() {
				let id = this.isSelectPhoneModel  ? this.id : this.detailInfo.id
				// 优先使用Vuex中的独立材质存储
				const materialMap = this.getCurrentMaterial?.materialMap || {
					11: this.phoneModelId,
					10: this.getCurrentMaterial?.materialMap?.[10] // 从Vuex获取材质ID
				};
				await getCustomDetail({
					id: id,
					materialMap: this.getCurrentMaterial?.materialMap || {  // 改为直接使用Vuex状态
						11: this._phoneModelId  // 确保使用最新机型ID
					}
					// materialMap: {
					// 	11:30,
					// 	10:331
					// }
				}).then(res => {
					this.detailInfo = res.data
					this.currentCarouselImage = this.detailInfo.imageUrl
					this.activeMaterialId = this.detailInfo.materialMap[10]

					this.id = res.data.id
					this._phoneModelId = this.phoneModelId
					this.getSkuList(this.detailInfo.materialMap[11], true)

					// let id = this.isSelectPhoneModel  ? this._phoneModelId : this.detailInfo.materialMap[11]
					// this.getSkuList(id , true)

					// 重置材质选择（新增）
					if(!this.getCurrentMaterial) {
						this.activeMaterialId = res.data.materialMap[10];
						this.$store.commit('setCurrentMaterial', {
							materialMap: res.data.materialMap
						});
					}
				}).catch(async (err) => {
					// console.log('err', err);
					// console.log('err.code', JSON.stringify(materialMap));
					if(err?.code === 3001) {  // 新增3001错误处理
						// 清空本地缓存和Vuex状态
						this.activeMaterialId = null
						// this._phoneModelId = null
						// this.$store.commit('setPhoneModelId', null)
						this.$store.commit('setCurrentMaterial', null)
						await sendMessage({
							type: err.code,
							content: JSON.stringify(materialMap),
							message: err.msg
						}).then(res => {

						})
					}
				})
			},
			// 去编辑
			toEdit() {
				uni.navigateTo({
					url: `/pages/diy/diyPhoneCase?tempId=${this.detailInfo.id}`
				})
			},
			// 放大图片预览
			async previewImage(index) {
				console.log('previewImage', index);
				const allImages = [
					this.detailInfo.imageUrl, // 第一张详情图
					...this.skuList[this.activeSkuIndex]?.carouselImages?.map(i => i.imageUrl) || []
				];
				// 安全索引处理
				const safeIndex = Math.min(index, allImages.length - 1);
				uni.previewImage({
					current: safeIndex,
					urls: allImages
				});

				// this.$refs.previewPhonecase.show(index)
				// this.reflash = false

				// let arr = [this.detailInfo.imageUrl]
				// uni.previewImage({
				// 	current: 0,
				// 	urls: arr
				// });
			},
			// 放大详情图预览
			previewDetailImages(index) {
				const detailImages = this.skuList[this.activeSkuIndex]?.detailImages || [];
        		const imageUrls = detailImages.map(item => item.imageUrl); // 提取所有图片的URL
				// 安全索引处理
				const safeIndex = Math.min(index, imageUrls.length - 1);
			    uni.previewImage({
					current: safeIndex,
					urls: imageUrls
				});
			},
			// 选择手机型号
			// selectModel(data) {
			// 	console.log('selectModel', data);
			// 	this.isSelectPhoneModel = true
			// 	uni.$u.debounce(() => {
			// 		// this.$store.commit('setPhoneModelId', this._phoneModelId)
			// 		// let materialMap = {
			// 		// 	10: this.getCurrentMaterial.materialMap[10],
			// 		// 	11: data,
			// 		// }
			// 		// this.$store.commit('setCurrentMaterial', materialMap)
			// 		this.getCustomDetail()
					
			// 		// this.getSkuList(this._phoneModelId)
			// 	})
			// },
			async selectModel(data) {
				console.log('selectModel', data);
				this.isSelectPhoneModel = true;

				 // 调用设置默认机型接口
				const res = await setDefaultPhoneModel({ 
					phoneModelId: data 
				});
				console.log('setDefaultPhoneModel', res);
				// this.setPhoneModelId(this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]]
				// 		.id)
				// 	this.setPhoneModelName(res.data.phoneModelName)
				
				// 立即更新本地和Vuex状态
				this._phoneModelId = data;
				this.$store.commit('setPhoneModelId', data);
				this.$store.commit('setPhoneModelName', res.data.phoneModelName);
				
				// 清除旧材质选择
				// this.$store.commit('setCurrentMaterial', null);
				// this.$u.debounce(() => {
				// 	this.getCustomDetail()
				// })
				    // 清除旧材质选择（新增以下三行）
					this.$store.commit('setCurrentMaterial', null);
					this.activeMaterialId = null;
					this.activeMaterialMap = {};
				this.getCustomDetail()
			},
			// 获取机壳列表
			getSkuList(_phoneModelId, isInit) {
				console.log('this.detailInfo',this.detailInfo);
				getSkuList({
					materialMap: {
						11: _phoneModelId
					},
					materialSubType: this.detailInfo.materialSubType,
					pageSize: 50
				}).then(res => {
					this.skuList = res.data
					console.log('isInit', isInit);
					if (isInit) {//点击分享后/获取详情
						this.activeSkuIndex = this.skuList.findIndex(item => {
							// return item.id == this.detailInfo.skuId
							return item.materialMap[10] == this.detailInfo.materialMap[10]
						})
						this.chooseSku(this.skuList[this.activeSkuIndex], this.activeSkuIndex)
					} else {//点击选择手机型号后
						let idx = this.skuList.findIndex(item => {
							return this.activeMaterialMap[10] == item.materialMap[10]
						})
						idx = idx == -1 ? 0 : idx
						this.chooseSku(this.skuList[idx], idx)
					}

				})
			},
			chooseMaterial(data, index) {
				// 先提交Vuex状态更新
				this.$store.commit('setCurrentMaterial', data)
				// 再执行后续操作
				this.chooseSku(data, index)
			},
			// 选择机壳
			chooseSku(data, index) {
				// 增加材质ID对比校验
				if (this.activeMaterialId === data.materialMap[10]) return
        
				// 同步更新Vuex中的机型信息
				this.$store.commit('setPhoneModelId', this._phoneModelId)

				this.activeMaterialId = data.materialMap[10]

				// this.activeSkuId = data.id
				this.activeSkuIndex = index
				this.activeMaterialMap = data.materialMap
				this.frameImageUrl = data.frameImageUrl
				this.baseImageUrl = data.baseImageUrl
				this.$store.commit('setPhoneModelId', this._phoneModelId)
				console.log('chooseSku', data);
  				// this.$store.commit('setCurrentMaterial', data)
				console.log('getCurrentMaterial', this.getCurrentMaterial);
				this.getCustomDetail()
			},
			// 去购买
			async toBuy() {
				// 确保使用最新产品ID
				// await this.getCustomDetail();
				let orderData = [{
					customProductId: this.detailInfo.id,
					quantity: 1
				}]
				uni.setStorageSync('orderData', orderData)
				// 增加跳转延迟确保存储完成
				await this.$nextTick(); 
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			// 重新定制
			retry() {},
			async share() {
				this.$refs.shareBox.open()
			},

			// 获取手机号授权
			getPhoneNumber(e) {
				if (e.detail.code) {
					decryptPhoneNumber({
						code: e.detail.code,
					}).then(response => {
						this.setPhoneNumber(response.data)
						this.toBuy()
					})
				}

			},
			// 打印
			toPrint() {
				if(!this.detailInfo.printable) return  uni.$u.toast('抱歉，此机型暂时不能打印，请切换其它机型或材质试试');
				if (!this.detailInfo || !this.detailInfo.printable) {
					return uni.$u.toast('数据加载中，请稍候')
				}
				let sukData = {
					phoneModel: this.$refs.selectPhoneModel.model.name,
					material: this.skuList[this.activeSkuIndex].name,
					id: this.detailInfo.id,
					address: this.isStore.split(':')[0],
					port: this.isStore.split(':')[1]
				}
				this.$refs.printBox.init(sukData)
			},
			// 获取分享的内容
			getShareInfo() {
				getShareInfo({
					shareRecordId: this.shareId
				}).then(res => {
					// this.detailInfo = res.data
					this.id = this.detailInfo.id  = res.data.id
					// await
					this.getCustomDetail()
					// this.activeMaterialId = this.detailInfo.materialMap[10]

					// // this.activeSkuId = this.detailInfo.skuId
					// this._phoneModelId = this.detailInfo.materialMap[11]
					// console.log('getShareInfo', this.activeMaterialId, this._phoneModelId);
					// this.getSkuList(this.detailInfo.materialMap[11], true)
				})
			},

		},
		async onShareAppMessage() {
			// 确保使用最新图片
  			await this.$nextTick()
			const {
				data
			} = await generateShare({
				type: 1,
				sourceType: 3,
				sourceId: this.detailInfo.id,
				shareImage: this.currentCarouselImage // 传递当前轮播图
			})
			this.$refs.shareBox.close()
			const imageUrl = await this.$refs.shareBox.drawCanvas1()
			return {
				title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
				imageUrl: imageUrl,
				path: `/pages/product/productDetail?scene=${data.id}`,
			}
		},
		async onLoad(e) {
			// 静默登录检查
			// if (!uni.getStorageSync('token')) {
			// 	await userLogin().catch(() => {
			// 		uni.$u.toast('登录失败，请重试')
			// 		return
			// 	})
			// }
			// 强制同步等待登录完成
			if (!uni.getStorageSync('token')) {
				await new Promise((resolve) => {
					const checkLogin = () => {
						if (uni.getStorageSync('token')) {
							resolve();
						} else {
							setTimeout(checkLogin, 200);
						}
					}
					checkLogin();
				});
			}
			if(e.id) {
				this.detailInfo.id = e.id
				
			}else if (e.scene) {
				uni.setStorageSync('shareRecordId', e.scene)
				this.shareId = e.scene// 立即处理分享参数（不依赖登录状态）
				await this.getShareInfo()// 确保在登录后执行
				// this.id = e.id
			}
			// if(this.shareId){
			// 	await this.getShareInfo()// 确保在登录后执行
			// }
			// else  else {
			// 	this.detailInfo.id = e.id || ''
			// }
		},
		
	}
</script>

<style lang="scss">

	/deep/ .wx-swiper-dots {
		position: absolute;
		bottom: 30rpx !important;
		 /* left: 10% !important; */
	}
	
	/deep/ .wx-swiper-dots-horizontal {
		/* left: 10% !important; */
	}
	.custom-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.header {
			height: 56rpx;
			line-height: 56rpx;

			.back {
				height: 25rpx;
				width: 25rpx;
				transform: rotate(180deg);
				padding: 16rpx 25rpx;
			}

			.share {
				height: 56rpx;
				width: 56rpx;
				float: right;
				margin-right: 25rpx;
			}
		}

		.custom-scroll {
			flex: 1;
			overflow: hidden;

			.share {
				height: 56rpx;
				width: 56rpx;
				position: absolute;
				right: 25rpx;
				top: 25rpx;
				z-index: 1;
				border: none;
				border-radius: 50%;

				&.btn {
					height: 110rpx;
					width: 110rpx;
					right: 5rpx;
					top: 5rpx;
					opacity: 0;
				}
			}
			.share-text{
				position: absolute;
				top: 70rpx;
				right: 20rpx;
				z-index: 1;

				.text{

				}
				@keyframes breathe {
					0% { transform: scale(1); }
					50% { transform: scale(1.15); }
					100% { transform: scale(1); }
				}
				
				.breathe-animation {
					animation: breathe 1.5s infinite ease-in-out;
				}
				
				.breathe-animation-delay {
					animation: breathe 1.5s infinite ease-in-out;
					animation-delay: 0.75s; /* 第二个文字延迟半拍 */
				}
			}
			.swiper {
				background-color: #fff;
				height: 970rpx;
			}

			.image-view {
				height: 750rpx;
				position: relative;
				overflow: hidden;
				transform: scale(1.2) translate3d(0, 0, 0) translate(0, 70rpx);
				background: #fff;
				-webkit-backface-visibility: hidden;
				-webkit-transform: scale(1.2) translate3d(0, 0, 0) translate(0, 70rpx);
				-webkit-mask-image: -webkit-radial-gradient(white, black);

				.picture {
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;

					&.top,
					&.btm,
					&.bg,
					&.fg {
						height: 750rpx;
						width: 750rpx;
					}

					&.btm {
						z-index: 0;
					}

					&.bg {
						z-index: 2;
					}

					&.fg {
						z-index: 4;
					}

					&.top {
						z-index: 999;
					}

				}

				.custom-view-image {
					height: 750rpx;
					width: 750rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
			}


			.sku-box {
				/*  height: 380rpx; */
				position: relative;

				.bg-scroll {
					width: calc(100% - 136rpx);
					height: 210rpx;
					margin: 0 auto;

					.bg-list {
						display: flex;
						justify-content: left;
						height: 100%;

						.bg-item {
							width: 130rpx;
							height: 100%;
							margin-right: 28rpx;
							flex-shrink: 0;

							.picture {
								height: 100%;
								width: 100%;
								box-sizing: border-box;
								margin-bottom: 28rpx;
								flex-shrink: 0;
								border-radius: 17rpx;

								&.active {
									border: 5rpx solid #333;
								}
							}

							.price {
								font-size: 38.55rpx;
								font-weight: 500;
								color: #3D3D3D;
								text-align: center;
							}
						}
					}
				}

				.skus {
					display: flex;
					margin-top: 17rpx;
					justify-content: start;

					.title {
						color: #979797;
						font-size: 28rpx;
						margin-left: 35rpx;
						line-height: 50rpx;
						white-space: nowrap;
						/* margin-right: 40rpx; */
					}

					.select {
						/* display: flex;
						justify-content: start;
						flex-wrap: wrap;
						flex-grow: 0;
						flex-direction: column; */
						width: 600rpx;
						display: grid;
						grid-template-columns: 1fr 1fr;

						.skus-item {
							height: 50rpx;
							border-radius: 30rpx;
							border: 2rpx solid transparent;
							line-height: 50rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: bold;
							flex-wrap: wrap;
							justify-content: start;
							flex-shrink: 0;
							padding: 0 17rpx;
							margin: 6rpx 0 0;

							&.active {
								border: 2rpx solid #333;
							}
						}
					}

				}

				.phone-model {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					margin: 26rpx 35rpx 0;
					position: relative;
					color: #979797;
					
					.title{
						/* margin-right: 40rpx; */
					}
					.select {
						display: inline-block;
						border-radius: 50rpx;
						border: 2rpx solid #333;
						padding: 0 17rpx;
						font-size: 26rpx;
						height: 50rpx;

						text {
							font-weight: bold;
							color: #333;
						}

						.text1 {
							margin-left: 17rpx;
							font-size: 20rpx;
						}
					}

				}

				.left {
					position: absolute;
					height: 42rpx;
					width: 42rpx;
					top: 94rpx;
					left: 26rpx;
					transform: rotate(180deg);

					.icon {
						height: 100%;
						width: 100%;
					}
				}

				.right {
					position: absolute;
					height: 42rpx;
					width: 42rpx;
					top: 94rpx;
					right: 26rpx;

					.icon {
						height: 100%;
						width: 100%;
					}
				}

				.to-edit {
					width: 143rpx;
					height: 75rpx;
					border-radius: 78rpx;
					font-size: 35rpx;
					box-sizing: border-box;
					border: 2rpx solid #333333;
					text-align: center;
					line-height: 71rpx;
					background-color: #333;
					color: #fff;
					position: absolute;
					top: -110rpx;
					right: 17rpx;
				}

				.right-bar {
					position: absolute;
					left: 17rpx;
					top: -217rpx;
					background: #fff;
					border-radius: 17rpx;
					box-shadow: 0rpx 0rpx 6rpx 0rpx #ccc;
					display: flex;
					flex-direction: column;

					image {
						width: 84rpx;
						height: 50rpx;
						padding: 10rpx 10rpx 30rpx;
						position: relative;
						border-radius: 17rpx;

						&.active {
							background-color: #f3f3f3;
						}

						&:nth-child(1) {
							border-radius: 17rpx 17rpx 0 0;
							border-bottom: 1rpx solid #e2e2e2;

							&::after {
								content: '背景';
								font-size: 22rpx;
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translate(-50%);
								color: #515151;
							}
						}

						&:nth-child(2) {
							border-radius: 0 0 17rpx 17rpx;

							&::after {
								content: '人像';
								font-size: 22rpx;
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translate(-50%);
								color: #515151;
							}
						}

						&:nth-child(3) {
							position: absolute;
							top: -107rpx;
							background: #fff;
							border-radius: 17rpx;
							box-shadow: 0rpx 0rpx 6rpx 0rpx #ccc;

							&::after {
								content: '原图';
								font-size: 22rpx;
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translate(-50%);
								color: #515151;
							}
						}
					}
				}

			}

			.details {
				/* margin-top: 60rpx; */
				margin-top: 20rpx;
				.details-item {
					height: 750rpx;
					width: 750rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}
		}

		.custom-bottom {
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			margin: 20rpx 0 0 0;
			padding: 0 47rpx;

			.custom {
				width: 250rpx;
				height: 78.8rpx;
				border-radius: 78rpx;
				font-size: 35rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 78.8rpx;
				background-color: #333;
				color: #fff;
			}

			.get-phone {
				height: 78rpx;
				opacity: 0;
				position: absolute;
				width: 250rpx;
			}

			.custom.retry {
				border: 2rpx solid #333;
				background-color: #fff;
				color: #333;
			}

			.price {
				font-size: 35rpx;
				height: 78.8rpx;
				line-height: 78.8rpx;
				font-weight: bold;
			}
		}

	}
</style>